<template>
  <div class="tabs-container">
    <el-tabs v-model="activeName" >
      <el-tab-pane label="Article" name="first">
        <div class="app-container">
            <articleCard v-for="item in article" :key="item.index" :article="item" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="App" name="second">
        <div class="app-container">
          <appCard v-for="item in applist" :key="item.index" :app="item" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="Project" name="third">
        <div class="project-container">
        <imgCard v-for="item in imgcard" :key="item.index" :card="item" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import {applist,imgcard,article} from '@/utils/table.js'
export default {
  data(){
    return{
      activeName:'first',
      applist,
      imgcard,
      article
    }
  },
  mounted(){
  }
}
</script>


<style lang="scss" scoped>
.tabs-container {
  flex: 6;
  border-radius: 8px;
  background: #ffffff;
  margin-left: 25px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
  .app-container,.project-container{
    padding: 25px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.tabs-container /deep/ .el-tabs__nav{
  padding: 0 15px;
}
.tabs-container /deep/ .el-tabs__active-bar{
  margin-left: 15px;
}
</style>
